﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>门票</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="../css/base.css"/>
    <link type="text/css" rel="stylesheet" href="../css/header.css"/>
    <link type="text/css" rel="stylesheet" href="../css/tickets.css"/>
    <link type="text/css" rel="stylesheet" href="../css/footer.css"/>
    <link type="text/css" rel="stylesheet" href="../css/swiper.min.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script type="text/javascript" src="/js/lib-flexible.js"></script>
    <script>
        $(function () {

            var user = JSON.parse(sessionStorage.getItem("user"));
            var currentPage=1;

            var pages;
            function query(keyword) {

                $.get("/tickets",{currentPage:currentPage,keyword:keyword},function(data){
                    pages=data.pages;
                    console.log(data);
                    $(".sights").renderValues(data);
                    $(".point").click(function () {
                        var point=$("#placePoint").html();
                        $.ajax({
                            type:'put',
                            url:"/days/"+user.id,
                            data:{"point":-point,state:null},
                            success:function (data) {
                                if(data.succeed){
                                    $(document).dialog({
                                        titleText: '温馨提示',
                                        content: '兑换成功'
                                    })
                                }else{
                                    $(document).dialog({
                                        titleText: '温馨提示',
                                        content: data.msg
                                    })
                                }

                            }

                        });
                        var id=$(this).val();
                        $.ajax({
                            type:'put',
                            url:"/tickets",
                            data:{state:1,id:id}
                        })
                    })


                });
                currentPage++
            }



            query();

            //监听事件
            $(window).scroll(function () {
                console.log(pages);
                if($(document).scrollTop()+$(window).height()>=$(document).height()-1) {
                    if (currentPage <= pages) {
                        query();
                    }else{
                        $(document).dialog({

                            type : 'toast',
                            content: '<span class="info-text">已经见底了</span>',
                            autoClose: 2500
                        })
                    }

                }
            })



            $("#query").click(function () {

                keyword=$("input[name='keyword']").val();
                console.log(keyword);
                query(keyword);
            });





        })
        
        
        
        
        
    </script>
    
    
    
</head>
<body>
<div class="header_top bar-nav">
    <a class="back-link-icon" href="javascript:history.go(-1);"></a>
    <h1 class="page-title-bar">门票</h1>
    <div class="st-top-menu">
        <span class="st-user-menu"></span>
        <div class="header-menu-bg"></div>
        <div class="st-down-bar">
            <ul>
                <li>
                    <a href="/mine/profiles.html"><i class="icon home-ico"></i>首页</a>
                </li>
                <li>
                    <a href="#"><i class="icon search-ico"></i>搜索</a>
                </li>
                <li>
                    <a href="/mine/ticketOrder.html"><i class="icon center-ico"></i>我的订单</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- 头部 -->
<div class="search-area clearfix">
    <div class="search-area-bar">
        <form id="searchForm" class="form-inline">
            <input type="hidden" name="currentPage" id="currentPage" value="1"/>
            <input  type="text" style="width: 250px"  name="keyword" placeholder="搜索旅游景点"/>
            <i class="fa fa-level-down fa-2x" aria-hidden="true" id="query"></i>
        </form>
    </div>


</div>
<!-- 搜索 -->
<div class="swiper-container swiper-banner-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide">
            <a class="item" href=""><img src="/upload/banner_01.jpg" alt=""/></a>
        </li>
        <li class="swiper-slide">
            <a class="item" href=""><img src="/upload/banner_01.jpg" alt=""/></a>
        </li>
        <li class="swiper-slide">
            <a class="item" href=""><img src="/upload/banner_01.jpg" alt=""/></a>
        </li>
    </ul>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
</div>
<!-- banner -->
<div class="hot-comment-block">
    <span class="hot-comment-tit"><!--<img src="picture/hot-comment-tit.png" alt="" />--></span>
    <div class="hot-comment-con swiper-container">
        <ul class="hot-comment-list swiper-wrapper">
            <li class="swiper-slide">
                <a href="#">
                    <span class="txt">成都大熊猫繁育研究基地</span>
                    <span class="price">积分<strong>280</strong>起</span>
                    <i class="arr-r-ico"></i>
                </a>
            </li>
            <li class="swiper-slide">
                <a href="#">
                    <span class="txt">成都大熊猫繁育研究基地</span>
                    <span class="price">积分<strong>280</strong>起</span>
                    <i class="arr-r-ico"></i>
                </a>
            </li>
            <li class="swiper-slide">
                <a href="#">
                    <span class="txt">成都大熊猫繁育研究基地</span>
                    <span class="price">积分<strong>280</strong>起</span>
                    <i class="arr-r-ico"></i>
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- 热门推荐 -->
<div class="ad-module-block">
    <div class="ad-module-t">
        <a href="#" class="item"><img src="/upload/ad01.jpg"/></a>
        <a href="#" class="item"><img src="/upload/ad02.jpg"/></a>
        <a href="#" class="item"><img src="/upload/ad03.jpg"/></a>
    </div>
</div>
<!-- 广告 -->
<div class="product-container">
    <div class="product-title-bar">
        <h3>人气景点</h3>
    </div>
    <div class="product-list-block sights">
        <div render-loop="list">
        <ul>
            <li>
                <a class="item">
                    <div class="pro-pic"><span><img render-src="list.imgUrl" alt="jd"/></span></div>
                    <div class="pro-info">
                        <h3 class="tit" render-html="list.name"></h3>
                        <div class="addr" render-html="list.address"></div>
                    </div>
                    <div class="pro-price">
                        <span class="price">
                            <em>积分<strong render-html="list.price" id="placePoint"></strong>起</em>
                        </span>
                        兑换积分<button class="btn btn-success btn-sm point"
                                    type="button" render-value="list.id"></button>
                    </div>
                </a>
            </li>

        </ul>
        </div>
        <!--<div class="module-more-bar">
            <a class="module-more-link" href="">查看更多</a>
        </div>-->
    </div>
</div>

<!-- 公用底部 -->
<a href="javascript:;" class="back-top" id="backTop"></a>
<script src="/js/swiper.min.js"></script>
<script src="/js/zepto.js"></script>
<script src="/js/tickets.js"></script>
<script type="text/javascript">
    //头部下拉导航
    $(".st-user-menu").on("click", function () {
        $(".header-menu-bg,.st-down-bar").show();
        $("body").css("overflow", "hidden")
    });
    $(".header-menu-bg").on("click", function () {
        $(".header-menu-bg,.st-down-bar").hide();
        $("body").css("overflow", "auto");
    });
</script>
</body>
</html>